<template>
  <div id="box">
    <van-sticky>
      <van-nav-bar
        v-show="$route?.meta?.isShowNavBar"
        :title="$route?.meta?.title || '无忧购'"
        :left-arrow="$route.meta.isShowBackIcon"
        @click-left="$router.back()"
      />
    </van-sticky>

    <router-view :class="$route.meta.isShowTabBar ? 'preventcover' : ''"></router-view>
    <van-tabbar v-model="active" active-color="orange" route v-show="$route.meta.isShowTabBar">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="qr" to="/classify">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/shopcar" :badge="totalNum">购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/user">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      online: navigator.onLine,
      totalNum: 0,
    };
  },
  methods: {
    updateOnlineStatu(event) {
      console.log(event.type);
      if (event.type === "offline") {
        this.$toast({
          message: "请检查网络",
        });
      }
      this.online = event.type === "online" ? true : false;
    },
  },
  mounted() {
    window.addEventListener("online", this.updateOnlineStatu);
    window.addEventListener("offline", this.updateOnlineStatu);
    this.$store.state.shopCarList.forEach((item) => {
      this.totalNum += item.number;
    });
  },
  beforeUnmount() {
    window.removeEventListener("online", this.updateOnlineStatu);
    window.removeEventListener("offline", this.updateOnlineStatu);
  },
  computed: {
    shopCarList() {
      return this.$store.state.shopCarList;
    },
  },

  watch: {
    shopCarList: {
      handler(newV) {
        this.totalNum = 0;
        newV.forEach((item) => {
          this.totalNum += item.number;
        });
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.preventcover {
  padding-bottom: 50px;
}

#box {
  .van-nav-bar .van-icon {
    color: orange;
  }
}

// 自定义进度条颜色
#nprogress .bar {
  background: orange !important; //自定义颜色
}
// 滚动条样式
::-webkit-scrollbar {
  width: 0;
}
</style>
